<!--
 * @Description: 函数作用说明
 * @Author: zdq
 * @Date: 2024-12-16 23:16:32
 * @LastEditTime: 2024-12-17 00:05:58
 * @LastEditors: zdq
 * @Reference: 
-->
<script setup lang="ts">
  import { ref, watch } from 'vue'
  import UpdatePrice from './UpdatePrice.vue'
  import { ElMessage } from 'element-plus'

  const props = defineProps<{
    modelValue: boolean
    priceForm: {
      id: string
      orderSettlePrice: number
    }
  }>()

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'update'): void
  }>()

  const visible = ref(false)
  const updatePriceFormRef = ref<InstanceType<typeof UpdatePrice> | null>(null)

  const onClose = () => {
    visible.value = false
    emits('update:modelValue', visible.value)
  }

  const onConfirm = async () => {
    if (updatePriceFormRef.value) {
      const res = await updatePriceFormRef.value.submit(props.priceForm.id)
      if (res) {
        ElMessage({
          message: res.success ? '修改成功！' : res.message,
          type: res.success ? 'success' : 'error',
          plain: true,
          duration: 5000,
          showClose: true,
        })

        if (res.success) {
          onClose()
          updatePriceFormRef.value.reset(props.priceForm.orderSettlePrice)
          emits('update')
        }
      }
    }
  }

  watch(
    props,
    (value) => {
      visible.value = value.modelValue
    },
    { immediate: true, deep: true },
  )
</script>

<template>
  <HDialog
    v-model="visible"
    title="修改工单总价"
    :width="400"
    :height="260"
    :loading="updatePriceFormRef && updatePriceFormRef.submitLoading"
    @close="onClose"
  >
    <div class="finish_order_dialog_form">
      <UpdatePrice ref="updatePriceFormRef" :price-form="props.priceForm" />
    </div>
    <template #footer>
      <HButton is-modal type="primary" @click="onConfirm">确定</HButton>
      <HButton is-modal @click="onClose">取消</HButton>
    </template>
  </HDialog>
</template>
